<template>
  <button :class="[size,nom]" class="c-button"><slot></slot></button>
</template>

<script>
export default {
    props:{
        size:{
            default:'base',
        },
        nom:{
            default:'primary',
        },
    }
}
</script>

<style lang="less" scoped>
  .c-button{
    text-align: center;
    border: none;
    cursor: pointer;
  }
  .base{
    min-width: 82px;
    height: 30px;
    background: #3b73f0;
    border-radius: 20px;
    padding: 0 20px;
    line-height: 30px;
  }
  .max{
    min-width:100px;
    height: 48px;
    border-radius: 24px;
    padding: 0 24px;
    line-height: 48px;
  }
  .small{
    min-width: 72px;
    height: 32px;
    border-radius: 24px;
    padding: 0 20px;
    line-height: 32px;
  }
  .primary{
    background:#202020;
    color:#fff;
  }
  .secondary{
    background: transparent;
    color:#202020;
    border: 1px solid #202020;
  }
  .cprimary{
    background:#3B73F0;
    color: #fff;
  }
  .csecondary{
    background: #fff;
    color:#202020;
  }
</style>